<template>
  <view class="btn"
    :style="{ width: width, height: height, 'box-shadow': shadow ? ' 0px 9rpx 10.2rpx 0px rgba(255, 118, 127, 0.44)' : '' }">
    <uv-button :hoverClass="hoverClass" type="success" :custom-style="customStyle" :hairline="plain" :plain="plain"
      :open-type="openType" :color="btn_bg" @getphonenumber="getphonenumber" @click="emit('click')">
      <slot>{{ btn_text }}</slot>
    </uv-button>
  </view>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
  plain: {
    type: Boolean,
    default: false
  },
  btn_text: {
    type: String,
    default: '默认按钮'
  },
  hoverClass: {
    type: String,
    default: ''
  },
  btn_bg: {
    type: String,
    // default: 'linear-gradient(90deg, #A30114 0%, #7E000F 100%)'
    default: '#840202'
  },
  width: {
    type: String,
    default: '690rpx'
  },
  height: {
    type: String,
    default: '95rpx'
  },
  shadow: {
    type: Boolean,
    default: false
  },
  openType: {
    type: String,
    default: ''
  },
  f_size: {
    type: String,
    default: '32rpx'
  },
  f_color: {
    type: String,
    default: '#fff'
  },
  rounded: {
    type: String,
    default: '12rpx'
  }
});
const customStyle = computed(() => {
  return {
    width: props.width,
    height: props.height,
    'font-size': props.f_size,
    color: props.f_color,
    'border-radius': props.rounded,
    'border-width': props.plain ? '2rpx !important' : '0',
    padding: 0
  };
});
const emit = defineEmits(['click']);
const getphonenumber = (e) => {
  emit('getphonenumber', e);
};
</script>

<style lang="scss" scoped></style>
